<template>
  <div id="app">
  	<router-view></router-view>
  	<nav>
  	<div @click="change(index1)">
  		 <router-link to="/home"><div>
      	<div v-bind:class="{active1:index1==cuindex,nomal1:1==1}" ></div>
      	<p>首页</p>
      </div></router-link>
  	</div>
     <div @click="change(index2)"> 
     <router-link to="/market">
      <div v-bind:class="{active2:index2==cuindex,nomal2:1==1}" ></div>
      <p> 分类</p>
     </router-link>   
     	
     </div>
       <div @click="change(index3)">
       	 <router-link to="/cart"><div v-bind:class="{active3:index3==cuindex,nomal3:1==1}"></div>
      <p>购物车</p>
      </router-link>  
       </div>
     <div @click="change(index4)">
     	 <router-link to="/mine">
	<div v-bind:class="{active4:index4==cuindex,nomal4:1==1}" ></div>
	<p>我的</p>
      </router-link>
     </div>
     
      
    </nav>
      
  </div>
</template>

<script>
import axios from 'axios'
   export default{
   	data(){
   		return { 
   			cuindex:1,
   			index1:1,
   			index2:2,
   			index3:3,
   			index4:4,
   			bg:""
   			
   				}
   		},
	methods:{
		change(a){
			// console.log(this.cuindex)
			console.log(this.cuindex)
			console.log(a)
			this.cuindex=a
			console.log(this.cuindex)
			console.log(this)

		}
	},
	created(){
		
	}
   }
</script>
<style type="text/css">
	body{
		width: 100%;

	}
</style>
<style scoped>

*{
	margin: 0 ;
	padding: 0;

}
nav{
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0.45rem;
	opacity: 1;
	background-color: white;
}
nav>div{
	width: 25%;
	text-align: center;
}
#app{
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	
	left: 0;right: 0;

}

.nomal1{
	
width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 -1.39rem;
	background-size: 100%;
	margin:0 auto;

}
.nomal2{
	width: 0.2rem;
	height:0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 1.4rem;
	background-size: 100%;
	margin:0 auto;
}
.nomal3{
	width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 1rem;
	background-size: 100%;
	margin:0 auto;
}
.nomal4{
	width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 0.6rem;
	background-size: 100%;
	margin:0 auto;
}

.active1{
	
width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 -1.225rem;
	background-size: 100%;
	margin:0 auto;

}
.active2{
	
width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 0rem;
	background-size: 100%;
	margin:0 auto;

}
.active3{
	
width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 1.2rem;
	background-size: 100%;
	margin:0 auto;

}
.active4{
	
width: 0.2rem;
	height: 0.2rem;
	background: url(https://m.mi.com/component/footer/img/spr1_5b2e09c.png) 0 0.8rem;
	background-size: 100%;
	margin:0 auto;

}
nav p{
	font-size: 0.16rem;
}

</style>
